<!DOCTYPE HTML>

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <title>NUS IVLE Helper</title>

  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" charset="utf-8" />
</head>

<body>

<div id="wrapper">

  <div id="header" class="clearfix">

    <div id="user">
      Hi, <span id="username">Loading...</span> | <span id="user-logout">Logout</span>
    </div> <!-- END user -->

  </div> <!-- END header -->

  <div id="tabs" class="clearfix">

    <div id="nav">
      <ul>
        <li for="to-do"><strong>To-do</strong></li>
        <li class="tab-selected" for="announcement"><strong>Announcement</strong></li>
        <li for="modules"><strong>Modules</strong> <span class="sub-menu-button"> </span>
          <ul id="modules-submenu" class="sub-menu">
          </ul>
        </li>
        <!-- TimeTable Design Incomplete
        <li for="timetable"><strong>Timetable</strong></li>
        -->
      </ul>
    </div> <!-- END nav -->

    <div id="to-do-tab" class="tab hide-tab">

      <div id="todo-add">
        <input id="todo-add-input" type="text" name="todo-add-title" placeholder="What needs to be done?" />
      </div>

      <div id="todo-list">

      </div> <!-- END todo-list -->

      <div id="todo-stats" class="clearfix">
        <div id="todo-stats-incomplete"><strong>0</strong> <span class="word">item</span> left</div>
        <div id="todo-stats-completed">clear <span>0</span> completed <span class="word">item</span></div>
      </div> <!-- END todo-stats -->

    </div> <!-- End to-do-tab -->

    <div id="timetable-tab" class="tab hide-tab">
      timetable tab
    </div> <!-- End timetable-tab -->

    <div id="announcement-tab" class="tab hide-tab">

    </div> <!-- END announce-tab -->

    <div id="modules-tab" class="tab hide-tab clearfix">
      
    </div> <!-- END modules-tab -->

    <div id="load-tab" class="tab">
      <h1>Loading ...</h1>
      <span id="load-gif"></span>

      <div id="error-msg">
      </div>
    </div> <!-- END load-tab -->

    <div id="workbin-tab" class="tab hide-tab">
      workbin tab
    </div> <!-- END workbin-tab -->

    <div id="module-announce-tab" class="tab hide-tab">
      module announcement tab
    </div> <!-- END module-announce-tab -->

    <div id="template-tab" class="tab hide-tab">

<!-- workbin folder templates -->
      <div class="folder clearfix">
        <h2><img src="img/f_blue.png" alt="folder-icon" /> </h2>

      </div> <!-- END folder -->
<!-- workbin folder templates -->

<!-- workbin file template -->
      <div class="file">
        <span class="file-type"></span>
        <span class="file-name">filename</span>
        <span class="file-id">id</span>
        <span class="file-status"></span>
      </div> <!-- End file -->
<!-- workbin file template -->

<!-- todo item template -->
      <div class="todo-item">
        <span class="todo-id"></span>
        <input type="checkbox" name="todo-complete" class="todo-button"/>
        <span class="todo-title">Todo Template</span>
        <span class="todo-delete"> × </span>
      </div> <!-- End todo-item -->
<!-- todo item template -->

<!-- module box item template -->
      <div class="mod-item">
        <div class="mod-info">
          <h1>WANG</h1>
          <h2>ZHUOCHUN</h2>
          <span class="mod-id">MODULE ID</span>
        </div>

        <span class="unread zero-unread mod-label">0</span>
      </div> <!-- END mod-item -->
<!-- module box item template -->

<!-- announcement item template -->
      <div class="ann-item">
        <h1>Sample Announcement</h1>
        <span class="ann-id"></span>

        <div class="ann-content">
          <div class="ann-description">
            <p>Sample Announcement</p>
          </div> <!-- End ann-description -->

          <div class="ann-action">
            <ul>
              <li class="ann-push-todo"><img src="img/push_todo.png" alt="Push to Todo"/> <span class="word">Push to To-do</span></li>
            </ul>
          </div> <!-- END ann-action -->
        </div> <!-- END ann-content -->
      </div> <!-- END ann-item -->
<!-- announcement item template -->

    </div> <!-- END template-tab -->
    
  </div> <!-- END tabs -->

</div> <!-- END wrapper -->

</body>
</html>
